<template>
    <div>
        <div class="row">
            <span class="demonstration">案场：</span>
            <el-select v-model="siteId" filterable placeholder="请选择">
                <el-option
                        v-for="item in sites"
                        :key="item.id"
                        :label="item.siteName"
                        :value="item.id">
                </el-option>
            </el-select>
            <span class="demonstration">时间：</span>
            <el-date-picker
                    v-model="date"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
            </el-date-picker>
            <el-button type="primary" class="button demonstration" @click="selectData()">查询</el-button>
        </div>
        <div class="row">
            <v-table
                    is-horizontal-resize
                    is-vertical-resize
                    :is-loading="isLoading"
                    style="width:90%"
                    :columns="tableConfig.columns"
                    :table-data="tableConfig.tableData"
                    :vertical-resize-offset='100'
                    even-bg-color="#f4f4f4"
                    row-hover-color="#eee"
                    row-click-color="#edf7ff">
            </v-table>
            <v-pagination
                    @page-change="pageChange"
                    @page-size-change="pageSizeChange"
                    :total="tableConfig.total"
                    :page-size="tableConfig.pageSize"
                    :layout="['total', 'prev', 'pager', 'next', 'sizer', 'jumper']">
            </v-pagination>
        </div>
    </div>
</template>

<script>
    export default {
        name: "notes",
        data() {
            return {
                isLoading: false,
                date: [new Date(), new Date()],
                pickerOptions: {
                    disabledDate(time) {
                        var result = time.getTime() < Date.now();
                        return !result
                    }
                },
                sites: [],
                siteId: '',
                tableConfig: {
                    pageIndex: 1,
                    pageSize: 20,
                    total: 0,
                    tableData: [],
                    columns: [
                        {
                            field: 'itemName',
                            title: '物品名称',
                            width: 200,
                            titleAlign: 'center',
                            columnAlign: 'center',
                            isResize: true
                        },
                        {
                            field: 'epc',
                            title: 'EPC',
                            width: 100,
                            titleAlign: 'center',
                            columnAlign: 'left',
                            isResize: true
                        },
                        {
                            field: 'times',
                            title: '次数',
                            width: 100,
                            titleAlign: 'center',
                            columnAlign: 'center',
                            isResize: true
                        },
                        {
                            field: 'dateTime',
                            title: '时间',
                            width: 100,
                            titleAlign: 'center',
                            columnAlign: 'center',
                            isResize: true
                        }
                    ]
                }
            }
        },
        methods: {
            pageChange(pageIndex) {

                this.tableConfig.pageIndex = pageIndex;
                this.selectData()
            },
            pageSizeChange(pageSize) {
                this.tableConfig.pageIndex = 1;
                this.tableConfig.pageSize = pageSize;
                this.selectData()
            },
            selectData() {
                if (this.deviceId === '') {
                    this.$message.error("请选择设备")
                    return
                }
                let startTime = this.$moment(this.date[0]).hour(0).minute(0).second(0).format("YYYY-MM-DD HH:mm:ss")
                let endTime = this.$moment(this.date[1]).hour(23).minute(59).second(59).format("YYYY-MM-DD HH:mm:ss")
                if (this.$moment(startTime) > this.$moment(endTime)) {
                    this.$message.error("开始时间不能大于结束时间")
                    return
                }
                this.selectNoteData(startTime, endTime)
            },
            selectNoteData(startTime, endTime) {

                this.$axiosPost("/selectNoteData.action",
                    {
                        "siteId": this.siteId, "startTime": startTime, "endTime": endTime,
                        "pageIndex": this.tableConfig.pageIndex, "pageSize": this.tableConfig.pageSize
                    }).then((res) => {
                    this.tableConfig.total = res.data.total
                    this.tableConfig.tableData = res.data.records
                    if (res.data.records.length == 0) {
                        this.$message.warning("没有数据")
                    }
                })
            },
            selectSite() {
                this.$axiosGet("/selectSite.action").then((res) => {
                    this.sites = res.data
                })
            },
        },
        created() {
            this.selectSite()
        },
        watch: {

        }
    }
</script>

<style>
    .row {
        margin-top: 10px;
    }

    .demonstration {
        margin-left: 10px;
    }

</style>